<template>
  <div class="pop-box">
    <!-- 组件布局 -->
    <div class="top" @click="offPop"></div>
    <div class="bottom">
      <!-- 点击条件渲染 下一个内容 -->
      <div class="selectStyle" @click="selectStyle(2)" v-if="selectShow == 1">
        随机
      </div>
      <div class="selectStyle" @click="selectStyle(3)" v-if="selectShow == 2">
        列表
      </div>
      <div class="selectStyle" @click="selectStyle(1)" v-if="selectShow == 3">
        单曲
      </div>
      <!-- 展示用户进入播放页面的歌曲 
        在vuex中
        
      -->
      <div class="musicList">{{ musicDetail.name }} --{{ arName }}</div>

      <div class="off" @click="offPop">关闭</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectShow: 1,
      musicDetail: {},
      arName: "",
    };
  },
  // vuex 在刷新页面的时候vuex中存放的数据会初始化
  mounted() {
    //获取store中的数据
    console.log(this.$store.state);
    this.musicDetail = this.$store.state.musicDetail;
    this.arName = this.$store.state.musicDetail.ar[0].name;
  },
  methods: {
    //点击却换播放方式
    selectStyle(data) {
      this.selectShow = data;
    },
    //子组件向父组件传递数据
    offPop() {
      //$emit()
      this.$emit("offPopShow");
    },
  },
};
</script>

<style scoped lang="less">
.pop-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 9999;
  .top {
    height: 100%;
    background: black;
    opacity: 0.3;
  }
  .bottom {
    position: fixed;
    width: 100%;
    height: 900px;
    background: #fff;
    bottom: 0;
    padding: 40px 70px;
    .selectStyle {
      height: 200px;
      line-height: 200px;
      border-bottom: 2px solid black;
    }
    .off {
      position: fixed;
      text-align: center;
      height: 200px;
      width: 100%;
      bottom: 0;
      left: 0;
    }
  }
}
</style>
